<template>
    <div id='' class=''>
        <!-- 左侧点> -->
        <div v-if="leftPointShow && type!=='left'" class="round-left"></div>
        <!-- 右侧点 -->
        <template v-if="option.children.length!==0">
            <div class="round-right" @click.stop="ems(option,index,type)">
                <span v-show="addShow" class="round-right-add">+</span>
                <span v-show="!addShow" class="round-right-subtract">-</span>
            </div>
        </template>
    </div>
</template>
<script>
// import { mapState, mapActions, mapMutations,mapGetters } from 'vuex'
export default {
    name: '',
    props: ['option', "index", "type"],
    data() {
        return {
            leftPointShow: true,
            rightPointShow: true,
            addShow: true,
        };
    },
    components: {},
    computed: {
        // ...mapGetters('admin/treeRelationship', ['showAddShow'])
    },
    beforeMount() { },
    mounted() { },
    methods: {
        // ...mapActions('admin/treeRelationship', ['changeAddShow']),
        showLeft() {
            this.leftPointShow = true;
        },
        showRight() {
            this.rightPointShow = true;
        },
        ems(option, index, type) {
            if (option) {
                if (type == 'left') {
                    this.$emit('left_Click', option, index)
                } else {
                    this.$emit('middle_click', option, index)
                }
            }
            this.changeAddShow({
                key: 'addShow',
                value: value
            })
        },
        clickChange(value, option, index, type) {
            // debugger
            this.addShow = value
            // if (option) {
            //     if (type == 'left') {
            //         this.$emit('left_Click', option, index)
            //     } else {
            //         this.$emit('middle_click', option, index)
            //     }
            // }
            // this.changeAddShow({
            //     key: 'addShow',
            //     value: value
            // })
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
@blue: #2d8cf0;
.round-left {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid @blue;
    border-radius: 50%;
    z-index: 2;
    left: -4px;
    top: 24px;
    background: #fff;
}
.round-right {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1px solid @blue;
    border-radius: 50%;
    z-index: 2;
    right: -9px;
    top: 19px;
    background: #fff;
    color: @blue;
    cursor: pointer;
    user-select: none;
    &-add {
        position: absolute;
        left: 4px;
        top: -2px;
    }
    &-subtract {
        position: absolute;
        left: 6px;
        top: -3px;
    }
}
</style>